<template>
  <div style="padding: 50px">
    <template v-if="frameState && frameState.userInfo">
      <el-avatar :src="frameState.userInfo.avatar" />
      <span>{{ frameState.userInfo.name }}</span>
    </template>

    <el-button @click="updateUserInfo()">更新1</el-button>
    <el-button
      type="danger"
      @click="updateUserInfo2()">
      更新2
    </el-button>
    <el-button
      type="primary"
      @click="toggleTheme()">
      切换主题
    </el-button>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { PlatformFrameState } from 'qiankun-frame'
import { State } from 'vuex-class'
import { qiankunApp } from '@/qiankun/qiankun-app'
import { addClass, hasClass, removeClass } from '@lhy-assist/utils'

@Component
export default class Demo extends Vue {
  @State
  frameState!: PlatformFrameState

  updateUserInfo() {
    this.frameState.userInfo.name = '李四'
  }

  updateUserInfo2() {
    qiankunApp.setState({
      userInfo: {
        ...this.frameState.userInfo,
        name: '王五',
      },
    })
  }

  toggleTheme() {
    const html = document.getElementsByTagName('html')[0]
    if (hasClass(html, 'dark')) {
      removeClass(html, 'dark')
    } else {
      addClass(html, 'dark')
    }
  }
}
</script>
